<template>
  <main class="wss-container">
    <div class="label-box-content">
      <el-row :gutter="30" type="flex">
        <el-col :span="8">
          <NewCard title="擅长领域">
            <div class="leftMenu">
              <div class="leftSearch">
                <el-select
                  @change="selectType"
                  v-model="filterText"
                  filterable
                  placeholder="请选择领域"
                >
                  <el-option
                    v-for="menu in ConsultTypeList"
                    :key="menu.id"
                    :label="menu.name"
                    :value="menu.id"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="leftTitle">
                <span>领域</span>
                <span>类限</span>
              </div>
              <el-menu :default-active="activeMenu">
                <div v-for="(item, index) in secondType.children" :key="index">
                  <el-submenu :index="item.id" v-if="item.children">
                    <template slot="title">
                      <span>{{ item.name }}</span>
                    </template>
                    <el-menu-item
                      v-for="ThreeItem in item.children"
                      @click="selectTerritory(ThreeItem)"
                      :index="ThreeItem.id"
                      :key="ThreeItem.id"
                    >
                      <span slot="title">
                        {{ ThreeItem.name }}
                        <el-input
                          @blur="editSecondType(ThreeItem)"
                          v-model.number="ThreeItem.quota"
                        ></el-input>
                      </span>
                    </el-menu-item>
                  </el-submenu>
                  <el-menu-item
                    v-else
                    @click="selectTerritory(item)"
                    :index="index.toString()"
                  >
                    <span slot="title">
                      {{ item.name }}
                      <el-input
                        @blur="editSecondType(item)"
                        v-model.number="item.quota"
                      ></el-input>
                    </span>
                  </el-menu-item>
                </div>
              </el-menu>
            </div>
          </NewCard>
        </el-col>
        <el-col :span="8">
          <div class="corrExpert">
            <NewCard title="专家名单">
              <!-- <el-menu-item v-for="l in listNumName" :index="JSON.stringify(l.index)" :key='l.index'>
                                <span slot="title">{{l.name}}</span>
                            </el-menu-item> -->
              <!-- <el-menu-item class="addUp">
                                累计百分比：<span>{{addUp}}%</span> / 100%
                            </el-menu-item> -->
              <template>
                <div class="centerTable">
                  <div class="centerSearch">
                    <el-popover placement="bottom" width="160">
                      <el-input
                        @blur="searchExpertFn"
                        v-model="searchExpert"
                        size="mini"
                        placeholder="输入关键字搜索"
                      />
                      <el-button
                        slot="reference"
                        icon="el-icon-search"
                        circle
                      ></el-button>
                    </el-popover>
                  </div>

                  <el-table
                    @row-dblclick="selectExpert"
                    @row-click="getcurrent"
                    :data="expertList"
                    :default-sort="{ prop: 'date', order: 'descending' }"
                    :highlight-current-row="highlight"
                    :fit="fit"
                    :height="tableHeight"
                    style="width: 100%"
                    ref="table"
                  >
                    <el-table-column label="姓名" prop="name">
                    </el-table-column>
                    <el-table-column label="日限" prop="index" sortable>
                      <template slot-scope="scope">
                        <el-input
                          @blur="editExpertFn(scope.row)"
                          v-model.number="scope.row.quota"
                        ></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column label="人限" prop="asLimit" sortable>
                      <template slot-scope="scope">
                        <el-input
                          @blur="editExpertFn(scope.row)"
                          v-model.number="scope.row.expertQuota"
                        ></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column label="排序" prop="index" sortable>
                      <template slot-scope="scope">
                        <el-input
                          @blur="editExpertFn(scope.row, 'paixv')"
                          v-model.number="scope.row.sort"
                        ></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </template>
            </NewCard>
          </div>
        </el-col>
        <el-col :span="8">
          <NewCard title="派工日历">
            <div class="index-calendar">
              <el-calendar v-model="value">
                <template slot="dateCell" slot-scope="{ date, data }">
                  <p
                    :class="estState(date, data)"
                    @click="clickCale(date, $event, data)"
                    @dblclick="dbHoli(date, $event, data)"
                  >
                    <!-- {{ data.day.split('-').slice(2).join('-') }} -->
                    {{ getDay(date) }}
                  </p>
                </template>
              </el-calendar>
              <div class="rlExplain">
                <p>
                  <i class="blueCircle"></i
                  ><i class="redCircle"></i>蓝色代表可派工，红色代表请假(单击)
                </p>
                <p>
                  <i class="yellowCircle"></i
                  ><i class="grayCircle"></i>黄色代表调休，灰色代表周末(双击)
                </p>
                <p style="padding-left: 35px">灰色代表休息</p>
              </div>
            </div>
          </NewCard>
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import { getConsultTypeEditApi } from "@/wss/newApi_3-24/work/consultType.js";

import {
  getCalendarListApi,
  getCalendarEditApi,
  getCalendarAddApi,
} from "@/wss/newApi_3-24/work/calendar.js";
import {
  getSkilledSelectSkilledApi,
  getSkilledEditApi,
} from "@/wss/newApi_3-24/work/skilled.js";
import { getConsultTypeListApi } from "@/wss/newApi_3-24/work/consultType.js";
import NewCard from "../../../components/newCard.vue";
export function isPositiveNum(s) {
  var re = /^(0|[1-9]d*)$/;
  return re.test(s);
}
export default {
  name: "editCalendar",
  components: { NewCard },
  data() {
    return {
      calendarParams: {
        userId: "",
        expertId: "",
      },
      // 查询专家参数列表
      getExpertParams: {
        name: "",
        status: 0,
      },
      searchExpert: "",
      // 专家列表
      expertList: [],
      // 二级类型
      secondType: [],
      //擅长领域
      filterText: "财务",
      ConsultTypeList: [],
      //指定节点标签和子树节点对象
      defaultProps: {
        children: "children",
        label: "label",
      },
      calendarList: [],

      value: new Date(),
      //左侧菜单高亮
      highlight: true,
      //默认激活第一个
      activeMenu: "1",
      //表格高亮
      highlight: true,
      //表格自动撑开
      fit: false,
      //自适应表格高度
      tableHeight: 0,

      //日历激活状态
      holiday: false, //是否休假
      // 当前行数
      currentEdititem: "",
    };
  },
  methods: {
    // 修改二级类型
    async editSecondType(row) {
      let { code, msg } = await getConsultTypeEditApi(row);
      if (code != 200) return;
      this.$message({
        type: "success",
        message: msg,
      });
    },
    // 获取当前行数
    getcurrent(item) {
      this.currentEdititem = JSON.parse(JSON.stringify(item));
    },
    // 失去焦点函数
    async editExpertFn(row, paixv) {
      const { quota, sort, expertQuota } = this.currentEdititem;
      // 没发生改变直接退出
      if (
        row.quota == quota &&
        sort == row.sort &&
        expertQuota == row.expertQuota
      ) {
        return;
      }

      // console.log(row);
      let currentRow = JSON.parse(JSON.stringify(row));
      // 修改sort字段时再传递过去
      if (!paixv) currentRow.sort = null;

      let { code, msg } = await getSkilledEditApi(currentRow);
      if (code != 200) return;
      this.$message({
        type: "success",
        message: msg,
      });
    },
    // 获取当前编辑的哪一项

    getEditItem(data) {
      return this.calendarList.find((item) => {
        return item.id == data.id;
      });
    },
    // 修改
    async getCalendarEditFn(calendarParams) {
      let { code, msg } = await getCalendarEditApi(calendarParams);
      console.log(msg);
      if (code != 200) {
        this.$message({
          type: "warming",
          message: msg,
        });
      }
    },
    //初始化周末为灰色底 是否休假
    estState(date, data) {
      let flag = this.calendarList.find((item) => {
        // console.log(item.calendarDate == currentDate);
        // console.log(item.calendarDate);
        if (item.calendarDate == data.day) {
          data.id = item.id;
          return true;
        }
      });

      if (flag?.status == 1) {
        return "bg-work";
      } else if (flag?.status == 2) {
        return "bg-festival";
      } else if (flag?.status == 3) {
        return "bg-holiday";
      } else if (flag?.status == 4) {
        return "bg-dayOff";
      } else if (date.getDay() === 6 || date.getDay() === 0) {
        return "bg-week";
        // 没有id就是没有安排的
      } else if (!data.id) {
        // return "bg-unArrange";
      }
      // console.log(date.getDay());
      // if (date.getDay() === 6 || date.getDay() === 0) {
      //   // console.log('bg-week');
      //   return "bg-week";
      // }
      // if (this.holiday === true) {
      //   return "bg-holiday";
      // }
    },
    //双击日历改为休假状态
    async dbHoli(date, e, data) {
      // 没有选择专家点击日历直接退出
      if (!this.expertId) return;
      this.isDouble = true;
      let editItem = this.getEditItem(data);

      let calendarParams = JSON.parse(JSON.stringify(this.calendarParams));
      calendarParams = editItem;
      if (editItem) {
        let status = calendarParams.status;
        calendarParams.expertId = this.expertId;
        calendarParams.calendarDate = data.day;
        // let classList = e.target.classList;

        if (status == 4) {
          calendarParams.status = 2;
        } else {
          calendarParams.status = 4;
          //  calendarParams.status = 4;
          // calendarParams.status = 3;
        }

        this.getCalendarEditFn(calendarParams);
      } else {
        let { code, msg } = await getCalendarAddApi({
          expertId: this.expertId,
          calendarDate: data.day,
          status: 2,
        });
        if (code != 200) return;
        this.getCalendarListFn();
      }
      setTimeout(() => {
        this.isDouble = false;
      }, 1000);
    },
    selectExpert(row) {
      // console.log(row);
      this.calendarParams.expertId = row.expertId;
      this.calendarList = [];
      this.expertId = row.expertId;
      this.getCalendarListFn();
    },
    async getCalendarListFn() {
      let { all, user } = await getCalendarListApi(this.calendarParams);

      this.calendarList = JSON.parse(JSON.stringify(user));
    },
    // 搜索专家
    async searchExpertFn() {
      const _this = this;
      _this.getExpertParams.name = _this.searchExpert;
      // 这里报错报错报错🧨🧨
      await this.getSkilledSelectSkilledFn();
    },
    async getSkilledSelectSkilledFn() {
      let { code, rows } = await getSkilledSelectSkilledApi(
        this.getExpertParams
      );

      if (code != 200) return;
      this.expertList = JSON.parse(JSON.stringify(rows));
    },
    async selectTerritory(item) {
      console.log(item);
      this.getExpertParams.consultType = item.id;
      this.getSkilledSelectSkilledFn();
    },
    // 选择类型
    selectType(id) {
      const ConsultTypeList = this.ConsultTypeList;
      let currentItem = ConsultTypeList.find((item) => item.id == id);
      console.log(currentItem, "这里面没有哦！！");
      this.secondType = currentItem;
    },
    //擅长领域
    filterNode(value, ConsultTypeList) {
      if (!value) return true;
      return ConsultTypeList.label.indexOf(value) !== -1;
    },

    //标注今天日期
    getDay(ConsultTypeList) {
      return ConsultTypeList.getDate();
    },

    //单击日历选中状态
    async clickCale(date, e, data) {
      // 没有选择专家点击日历直接退出
      if (!this.expertId) return;

      setTimeout(async () => {
        // 是双击直接退出
        if (this.isDouble) return;

        // 修改
        if (data.id) {
          let editItem = this.getEditItem(data);
          let calendarParams = JSON.parse(JSON.stringify(this.calendarParams));
          // 直接复制引用地址
          calendarParams = editItem;
          calendarParams.calendarDate = data.day;
          calendarParams.expertId = this.expertId;
          let classList = e.target.classList;

          if (
            classList.contains("bg-holiday") ||
            classList.contains("bg-dayOff")
          ) {
            calendarParams.status = 1;
          } else {
            calendarParams.status = 3;
          }
          this.getCalendarEditFn(calendarParams);
          // 添加
        } else {
          let { code, msg } = await getCalendarAddApi({
            expertId: this.expertId,
            calendarDate: data.day,
            status: 1,
          });
          if (code != 200) return;
          this.getCalendarListFn();
        }
      }, 1000);
    },

    //表格输入框排序
    handleChangeOrder(event, row, orderNum) {
      if (!isPositiveNum(+orderNum)) {
        event.target.value = this.orderTemp;
        this.$message({
          message: "请输入非负整数",
          type: "warning",
        });
        return;
      }
    },
    // 获取咨询类型
    async getConsultTypeListFn() {
      const { code, rows } = await getConsultTypeListApi();
      if (code != 200) return;

      this.ConsultTypeList = JSON.parse(JSON.stringify(rows));
    },
    myOnresize() {
      const self = this;
      self.tableHeight =
        window.innerHeight - self.$refs.table.$el.offsetTop - 130;
    },
  },
  computed: {
    //左侧关键字过滤
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.myOnresize);
  },
  mounted() {
    this.getConsultTypeListFn();
    //table固定表头，在mounted生命周期中，改变tableHeight的值，来让表格的高度自适应
    this.$nextTick(function () {
      this.tableHeight =
        window.innerHeight - this.$refs.table.$el.offsetTop - 130;
      // 监听窗口大小变化
      let self = this;

      window.onresize = function () {
        // console.log(self);
        self.tableHeight =
          window.innerHeight - self.$refs.table.$el.offsetTop - 130;
      };
    });
  },
};
</script>

<style scoped>
.label-box-content {
  height: 100%;
}
.el-input-number--mini {
  width: 100px;
}
.el-card >>> .top {
  border-bottom: 0;
  padding-top: 0;
}
.el-card >>> .el-card__body {
  position: relative;
  height: 100%;
}
.el-card >>> .el-card__body > div {
  padding-top: 0 !important;
  height: 92%;
  overflow-y: auto;
}
.corrExpert .el-card >>> .el-card__body > div {
  overflow-y: initial;
}

.el-row,
.el-card {
  height: 100%;
  margin-bottom: 0;
}
.label-box-content >>> h1 {
  margin: 0;
  padding: 20px 0 15px 0;
  border-bottom: 1px solid #e6ebf5;
}
.label-box-content >>> .top::after {
  height: 0;
}

/* 左侧菜单 */
.leftMenu .leftSearch {
  position: absolute;
  right: 20px;
  top: 10px;
  z-index: 9;
}
.leftMenu .leftTitle {
  display: flex;
  justify-content: space-between;
  color: #515a6e;
  height: 40px;
  line-height: 40px;
  font-size: 13px;
  margin: 6px 0;
  padding: 0 24px;
  font-weight: bold;
  background-color: #f8f8f8;
}
.leftMenu >>> .el-input--medium .el-input__inner {
  width: 125px;
}
.el-tree .typeRes {
  position: absolute;
  right: 30px;
}
.el-tree >>> .el-tree-node__content {
  width: 100%;
  height: 42px;
  line-height: 42px;
  padding-left: 24px;
  position: relative;
}
.el-tree > .el-tree-node > .el-tree-node__content {
  /* border-bottom: 1px solid #f1f1f1; */
}
.el-tree > .el-tree-node > .el-tree-node__children {
  /* border-bottom: 1px solid #f1f1f1; */
}
.el-tree >>> .el-tree-node__content > label.el-checkbox {
  position: absolute;
  right: 0;
}
.el-tree >>> .el-tree-node.is-current > .el-tree-node__content {
  background-color: #1890ff;
  color: #fff;
}
.el-tree >>> .el-tree-node.is-current > .el-tree-node__content .typeRes {
  color: #fff;
}
.el-tree
  >>> .el-tree-node.is-current
  > .el-tree-node__content
  .el-tree-node__label {
  color: #fff;
}
.el-tree >>> .el-tree-node__expand-icon.is-leaf {
  display: none;
}

/* 右侧菜单样式 */
.el-menu {
  border-right: 0;
}
.el-menu .typeRes {
  display: flex;
  justify-content: flex-end;
  color: #515a6e;
  height: 40px;
  line-height: 40px;
  font-size: 13px;
  margin: 6px 0;
  font-weight: bold;
}
.el-menu-item {
  height: 44px;
  line-height: 44px;
  padding-right: 5px;
}
.el-menu-item.is-active {
  background-color: #1890ff;
  color: #fff;
}
.el-menu-item > span {
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.el-menu-item > span .el-input {
  width: 75px;
}
.el-menu-item > span .el-input >>> .el-input__inner {
  width: 100%;
  text-align: center;
  height: 30px;
  line-height: 30px;
}
.el-menu-item .el-input-number--mini {
  position: relative;
  margin-top: 8px;
}
.el-menu-item .el-input-number--mini::after {
  content: "%";
  position: absolute;
  right: -13px;
  top: 2px;
  color: #ccc;
}
.addUp span {
  display: inline-block;
  color: #1890ff;
}
/* 右侧菜单样式end */

/* 中间带搜索表格 */
.el-card__body {
}
.centerTable .centerSearch {
  position: absolute;
  right: 20px;
  top: 10px;
  z-index: 9;
}
.el-table >>> table {
  width: 100% !important;
  table-layout: fixed !important;
}
.el-table >>> th > .cell {
  text-align: center;
}
.el-table >>> .cell {
  text-align: center;
}
.el-table >>> .el-table__body tr.current-row > td {
  background-color: #1890ff;
  color: #fff;
}
.el-table >>> .el-table__header-wrapper {
  margin: 6px 0;
}
.el-table >>> .el-table__header-wrapper th,
.el-table >>> .el-table__fixed-header-wrapper th {
  background-color: #f8f8f8 !important;
  padding: 0;
}
.el-table >>> th.is-leaf,
.el-table >>> td {
  border-bottom: 0;
}
.el-table >>> .el-input--medium .el-input__inner {
  height: 30px;
  line-height: 30px;
  padding: 0;
  text-align: center;
}
.el-table::before {
  height: 0;
}
/* 中间带搜索表格end */

/* 派工日历 样式 */
.rlExplain {
  font-size: 12px;
}
.rlExplain p {
  display: flex;
  align-items: center;
  margin: 0;
}
.rlExplain i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #f2f2f2;
  margin-left: 5px;
  margin-right: 3px;
}
.rlExplain i.blueCircle {
  background-color: #409eff;
}
.rlExplain i.redCircle {
  background-color: #f56c6c;
}
.rlExplain i.grayCircle {
  background-color: gray;
}
.rlExplain i.yellowCircle {
  background-color: yellow;
}
.index-calendar >>> .el-calendar__header {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0px 0 0;
  border-bottom: 0;
}
.index-calendar >>> .el-button--mini {
  padding: 7px;
}
.index-calendar >>> .el-calendar__body {
  padding: 12px 0px;
}
.index-calendar >>> .el-calendar__header > .el-calendar__title {
  width: 35%;
}
.index-calendar >>> .el-calendar__header > .el-calendar__button-group {
  width: 55%;
}
.index-calendar >>> .el-calendar__header .el-calendar__button-group {
  display: flex;
  justify-content: flex-end;
}

.index-calendar >>> .el-calendar-table tr td:first-child,
.index-calendar >>> .el-calendar-table td {
  border: 0;
}

.index-calendar >>> .el-calendar-table td.is-selected {
  background-color: #fff;
}

.index-calendar >>> .el-calendar-table .el-calendar-day {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 65px;
  padding: 0;
  position: relative;
}

.index-calendar >>> .el-calendar-table .el-calendar-day:hover {
  background-color: #fff;
}
.backlog {
  position: absolute;
  top: 4.75%;
  left: 80px;
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #f56c6c;
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
}

.index-calendar >>> .el-calendar-table .el-calendar-day:hover {
  background-color: #fff;
}
.backlog {
  position: absolute;
  top: 4.75%;
  left: 80px;
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #f56c6c;
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
}

.index-calendar >>> .el-calendar-table td .el-calendar-day p {
  display: block;
  width: 35px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid #fff;
}

.index-calendar >>> .el-calendar-table td .el-calendar-day p:hover {
  background-color: #f2f8fe;
}

.index-calendar >>> .el-calendar-table td .el-calendar-day p.bg-week {
  background-color: #f2f2f2;
}

.index-calendar >>> .el-calendar-table td.is-today .el-calendar-day p {
  border: 1px solid #409eff;
}

.index-calendar >>> .el-calendar-table td.is-selected .el-calendar-day p {
  color: #fff;
  background-color: #409eff;
}
.index-calendar >>> .el-calendar-table td .el-calendar-day p.bg-work {
  color: #fff;
  background-color: #409eff;
}
.index-calendar >>> .el-calendar-table td .el-calendar-day p.bg-dayOff {
  color: #fff;
  background-color: yellow;
}
.index-calendar >>> .el-calendar-table td .el-calendar-day p.bg-festival {
  position: relative;
}
.index-calendar
  >>> .el-calendar-table
  td
  .el-calendar-day
  p.bg-festival::after {
  display: block;
  font-size: 11px;
  content: "休";
  top: -10px;
  color: black;
  right: 0px;
  position: absolute;
}
.index-calendar >>> .el-calendar-table td .el-calendar-day p.bg-holiday {
  background-color: #f56c6c;
  border-color: #f56c6c;
  color: #fff;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}
/* 派工日历 end*/
</style>